<template>
  <view class="h-screen bg-[#F6F6F6] pt-safe">
    <z-paging-swiper>
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
      <template #top>
        <view class="bg-white">
          <uv-tabs
            v-if="tabList.length" :list="tabList" :current="current" :scrollable="scrollable"
            :active-style="{ color: '#1677FF', fontWeight: '500' }" :inactive-style="{ color: '#333' }"
            line-color="#1677FF" @change="tabsChange"
          />
        </view>
      </template>

      <swiper ref="xswiper" :current="current" class="h-full" @animationfinish="swiperFinish">
        <swiper-item v-for="(item, index) in tabList" :key="item.value">
          <OrderTabPagingList :tab-index="index" :current-index="current" :query-function="queryList" />
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { fetchUserOrderList } from '@/api/authService'
import OrderTabPagingList from '@/components/orderTabPagingList/orderTabPagingList.vue'

definePage({
  style: {
    navigationBarTitleText: '%myOrderList%',
    navigationBarBackgroundColor: '#FFF',
  },

})

const tabList = [
  { name: '全部', value: null },
  { name: '待付款', value: 2 },
  { name: '已支付', value: 3 },
  { name: '服务中', value: 4 },
  { name: '已结束', value: 5 },
]
const current = ref(0)
const scrollable = ref(false)
const xswiper = ref<ZPagingSwiperRef>(null)
onLoad((query: Record<string, any>) => {
  // 假设 query 中有 currentTab 或者 status 字段
  const statusFromQuery = Number(query.value) // 或 query.currentTab
  const index = tabList.findIndex(item => item.value === statusFromQuery)
  if (index >= 0)
    current.value = index
})
function tabsChange(args: any) {
  const { index } = args
  current.value = index
}

function swiperFinish(e) {
  current.value = e.detail.current
}

// queryFunction
async function queryList({ pageNo, pageSize, tabIndex }) {
  const status = tabList[tabIndex].value
  const res = await fetchUserOrderList({ page: pageNo, pageSize }, status)
  return { list: Array.isArray(res.list) ? res.list : [] }
}
</script>
